<template>
  <view>
     <view class="box">
       <view class="cu-bar tabbar bg-white shadow foot">
        
         <!-- 首页 -->
         <view class="action" @click="navChange"  data-cur="index">
             <view class='cuIcon-cu-image'>
                <image v-if="pageCur=='index'"  :src="indexCurPng"></image>
                <image v-if="pageCur != 'index'"  :src="indexPng"></image>
             </view>  
             <view :class="pageCur=='index'?'color_main':'text-gray'">
                <text>首页</text>
             </view>
         </view>

        <!-- 会员专区 -->
        <view class="action" @click="navChange" data-cur="search">
            <view class='cuIcon-cu-image'>
                <!-- 红点 -->
                <!-- <view class="cu-tag badge"></view> -->
                <image v-if="pageCur=='search'"  :src="shopCurPng"></image>
                <image v-if="pageCur != 'search'"  :src="shopPng"></image>
            </view>
            <view :class="pageCur=='search'?'color_main':'text-gray'">会员专区</view>
        </view>
        <!-- 组件模板 -->
        <view @click="navChange" class="action text-gray add-action" data-cur="cases">
            <image class="logo_btn" mode="widthFix" :src="logoPng"></image>
            <view :class="PageCur=='cases'?'color_main':'text-gray'">组件模板</view>
		</view>
       </view>
     </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import indexCurPng from '@/static/tabBar/index_cur.png'
import indexPng from '@/static/tabBar/index_cur.png'
import shopCurPng from '@/static/tabBar/shop_cur.png'
import shopPng from '@/static/tabBar/shop.png'
import logoPng from '@/static/logo.png'


const pageCur = ref("index")


function navChange(event: any){
   console.log(event)
   pageCur.value = event.currentTarget.dataset.cur
}


</script>

<style lang="scss" scoped>
.box {
  margin: 20upx 0;
}

.cu-bar {
	display: flex;
	position: relative;
	align-items: center;
	min-height: 100upx;
	justify-content: space-between;
}

.cu-bar.tabbar {
	padding: 0;
	height: calc(100upx + env(safe-area-inset-bottom) / 2);
	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
}


.cu-bar .action {
	display: flex;
	align-items: center;
	height: 100%;
	justify-content: center;
	max-width: 100%;
}

.cu-bar .action:first-child {
	margin-left: 30upx;
	font-size: 30upx;
}

.cu-bar.tabbar .action {
	font-size: 22upx;
	position: relative;
	flex: 1;
	text-align: center;
	padding: 0;
	display: block;
	height: auto;
	line-height: 1;
	margin: 0;
	background-color: inherit;
	overflow: initial;
}


.cu-bar .action:last-child {
	margin-right: 30upx;
}

.cu-bar.tabbar .action .cuIcon-cu-image {
	margin: 0 auto;
}

.cu-bar.tabbar .action .cuIcon-cu-image image {
	width: 50upx;
	height: 50upx;
	display: inline-block;
}


.box view.cu-bar {
   margin-top: 20upx;
}
	
.cu-bar.tabbar .action.add-action {
	position: relative;
	z-index: 2;
	padding-top: 50upx;
}

.cu-bar.tabbar .action.add-action {
	    padding-top: 56rpx !important;
}


.cu-bar.tabbar .action.add-action [class*="cuIcon-"] {
	position: absolute;
	width: 70upx;
	z-index: 2;
	height: 70upx;
	border-radius: 50%;
	line-height: 70upx;
	font-size: 50upx;
	top: -35upx;
	left: 0;
	right: 0;
	margin: auto;
	padding: 0;
}

.cu-bar.tabbar .action.add-action::after {
	content: "";
	position: absolute;
	width: 100upx;
	height: 100upx;
	top: -50upx;
	left: 0;
	right: 0;
	margin: auto;
	box-shadow: 0 -3upx 8upx rgba(0, 0, 0, 0.08);
	border-radius: 50upx;
	background-color: inherit;
	z-index: 0;
}


.cu-bar.tabbar .action.add-action::before {
	content: "";
	position: absolute;
	width: 100upx;
	height: 30upx;
	bottom: 30upx;
	left: 0;
	right: 0;
	margin: auto;
	background-color: inherit;
	z-index: 1;
}


	.logo_btn{
		width: 38*2rpx;
		height: 38*2rpx;
		position: absolute;
		z-index: 2;
		border-radius: 50%;
		top: -40rpx;
		left: 0rpx;
		right: 0;
		margin: auto;
		padding: 0;
	}


.cu-tag.badge {
	border-radius: 200upx;
	position: absolute;
	top: -10upx;
	right: -10upx;
	font-size: 20upx;
	padding: 0upx 10upx;
	height: 28upx;
	color: #ffffff;
}

.cu-tag.badge:not([class*="bg-"]) {
	background-color: #dd514c;
}


.bg-white {
	background-color: #ffffff;
	color: #666666;
}

.shadow[class*='white'] {
	--ShadowSize: 0 1upx 6upx;
}

.cu-bar.foot {
	position: fixed;
	width: 100%;
	bottom: 0;
	z-index: 1024;
	box-shadow: 0 -1upx 6upx rgba(0, 0, 0, 0.1);
}


.color_main{
		color: #000000;
		font-weight: 900;
}

.text-gray,
.line-gray,
.lines-gray {
	color: #aaaaaa;
}
</style>
